<template>
    <div class="bg">
        <div class="header">
            <div class="header-btnLeft" @click="$router.go(-1)"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">输入验证码</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h120"></div>
        <div class="login">
            <div class="login-item"><input type="text" name="code" v-model="code" placeholder="请输入验证码"/></div>
        </div>
        <div class="login-btn">
            <button class="login-btn-login" @click="regSubmit">完成注册</button>
        </div>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui';
    import storage from '../store/localstorage';
    import store from '../store/store';
    import * as types from '../store/types'

    export default {
        name: "My-reg-phone-code",
        data() {
            return {
                code: '',
                phone: '',
                country_code: ''
            }
        },
        methods: {
            nextStep() {
                var code = this.code;
                if (code.length < 4) {
                    Toast({message: '请输入验证码', duration: 1000});
                    return false;
                }


                var params = {
                    code: code,
                    telphone: this.phone,
                    country_code: this.country_code
                }
                this.axios.post('api/member/checkCode', params)
                    .then(res => {
                        this.$router.push({
                            path: '/my-reg',
                            query: {country_code: this.country_code, phone: this.phone}
                        })
                    })
                    .catch(err => console.log(err));
            },

            regSubmit() {
                var code = this.code;
                if (code.length < 4) {
                    Toast({message: '请输入验证码', duration: 1000});
                    return false;
                }


                var params = {
                    code: code,
                    order_id:window.localStorage.share_order_id || '',
                    telphone: this.phone,
                    country_code: this.country_code,
                    thumb: storage.get('thumb'),
                    qita: storage.get('qita')
                }
                this.axios.post('api/member/checkCode', params)
                    .then(res => {
                        Toast({message: '恭喜您注册成功！请在"我的 - 旅行红包"中查看！', duration: 2000});
                        storage.set('userinfo', res.data)
                        store.commit(types.LOGIN, res.data.token)
                        res.data.Integral.forEach((item) => {
                            if (item.types == 1) {
                                storage.set('product_integra', item)
                            } else if (item.types == 2) {
                                storage.set('comment_integra', item)
                            }
                        })
                        setTimeout(() => {
                            if (storage.get('loginurl')) {
                                var loginurl = storage.get('loginurl')
                                storage.remove('loginurl')
                                this.$router.push({path: loginurl})
                            } else {
                                this.$router.push({path: '/my'})
                            }
                        }, 1000)
                    })
                    .catch(err => console.log(err));
            },
        },
        mounted() {
            this.phone = this.$route.query.phone;
            this.country_code = this.$route.query.country_code;
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .bg {
        background: $bgcolor1;
        height: 100%;
    }

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }
    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .login {
        margin: rpx(30);
        background: $color0;
        &-item {
            border-bottom: solid 1px $color2;
            padding: rpx(20) 0;
            &:last-child {
                border-bottom: none;
            }
            input {
                padding: rpx(10) rpx(30);
                font-size: rpx(34);
            }
        }
        &-btn {
            padding: rpx(30);
            &-login {
                display: block;
                margin-bottom: rpx(30);
                border: none;
                width: 100%;
                height: rpx(100);
                line-height: rpx(100);
                background: $color3;
                border-radius: $radius6;
                color: $color0;
                font-size: rpx(34);
                text-align: center;
            }
        }
    }


</style>